<template>
    <div class="storeInfo">
        <div class="head">
            <el-form :model="form" class="headForm">
                
                <el-form-item label="" style="width:105px">
                <el-select v-model="form.store_type" placeholder="经营属性">
                    <el-option label="经营属性" value=""></el-option>
                    <el-option label="直营" value="1"></el-option>
                    <el-option label="加盟" value="2"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:105px">
                <el-select v-model="form.business_type" placeholder="营业情况">
                    <el-option label="营业情况" value=""></el-option>
                    <el-option label="未营业" value="-1"></el-option>
                    <el-option label="试营业" value="0"></el-option>
                    <el-option label="正式营业" value="1"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:105px">
                <el-select v-model="form.city_id" placeholder="城市">
                    <el-option label="城市" value=""></el-option>
                    <el-option :label="item.city" :value="item.city_id" v-for="(item,index) in cityNow" :key="index"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="" style="width:105px">
                <el-input v-model="form.title" placeholder="门店名称"></el-input>
                </el-form-item>
                
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>


            </el-form>
            
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%">
                <!-- <el-table-column :prop="item.bar" :label="item.name" fixed v-for="(item,index) in tabBar" :key="index">
                    <img :src="item.bar" alt="" v-if="item.name == '封面'">
                </el-table-column> -->

                <el-table-column prop="store_id" label="ID" fixed></el-table-column>
                <el-table-column prop="cover_image" label="封面" v-model="a">
                    <template   slot-scope="scope">            
                        <img :src="scope.row.cover_image+'?x-oss-process=image/resize,m_fill,w_60,h_50/quality,q_50'"  min-width="60" height="50" />
                    </template>   
                </el-table-column>
                <el-table-column prop="title" label="门店名称"></el-table-column>
                <el-table-column prop="store_type_cn" label="门店属性"></el-table-column>
                <el-table-column prop="telephone" label="客服电话"></el-table-column>
                <el-table-column prop="city_name" label="城市"></el-table-column>
                <el-table-column prop="address" label="地址" width="200"></el-table-column>

                <el-table-column prop="percent_cn" label="提成信息"></el-table-column>
                <el-table-column prop="remain_refresh_count" label="美团授权">
                    <template  slot-scope="scope">            
                        <span class="lightFont" @click="authorization(scope.row.meituan_account,scope.row.meituan_password)" v-if="scope.row.remain_refresh_count == null || scope.row.remain_refresh_count<=3">授权</span>
                        <span class="lightFont" v-else>{{scope.row.remain_refresh_count}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="business_cn" label="营业状况" >
                    <template  slot-scope="scope">
                        <span class="lightFont" @click="businessT(scope.row.business_type,scope.row.store_id)" :data-type="scope.row.business_type">{{scope.row.business_cn}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="reserve_cn" label="app预订">
                    <template  slot-scope="scope">
                        <span class="lightFont">{{scope.row.reserve_cn}}</span>
                    </template>
                </el-table-column>
                <el-table-column  label="操作" prop="store_id">
                    <template  slot-scope="scope">            
                        <button class="lightFont" @click="editFn(scope.row.store_id)">编辑</button>
                    </template>
                </el-table-column>

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        <!-- 美团授权弹框 -->
       
        <!-- 营业状况 -->
        <el-dialog title="营业状态切换" :visible.sync="dialogFormVisible" class="business">
            <el-form :model="form">
                
                <el-form-item label="" label-width="400">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="请选择.." value=""></el-option>
                    <el-option label="未营业" value="-1"></el-option>
                    <el-option label="试营业" value="0"></el-option>
                    <el-option label="正常营业" value="1"></el-option>
                </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="businessOk">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 授权弹框 -->
        <el-dialog :title="'用户名:'+meituanAuth.account +' 密码：'+meituanAuth.password" :visible.sync="authorizationMeituan" class="meituan">
            <div class="iframBox">
                <!-- <iframe id="meituanIfram" src="https://e.dianping.com/slogout " width="960" height="785"></iframe> -->
                <iframe id="meituanIfram" :src="meituanAuth.src" width="480" height="785"></iframe>
            </div>
        </el-dialog>
        <!-- 编辑弹框 -->
        <el-dialog title="编辑" :visible.sync="edit" class="editT">
            <el-form :model="formEdit">
<!-- 单纯input形式 -->
                <el-form-item label="门店名称" label-width="107px"  class="itemTxt">
                <el-input v-model="formEdit.title" autocomplete="off" class="longInput"></el-input>
                </el-form-item>
<!-- 上传 形式 -->
                <el-form-item>
                    <uploadBox spantxt="门店封面" :coverImg="formEdit.cover_image_url" :coverPath="formEdit.cover_image" v-on:throwFilePath="imgUrl"></uploadBox>
                </el-form-item>

<!-- 下拉框形式 -->
                <!-- <el-form-item label="活动区域" label-width="107px" class="itemTxt">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                </el-form-item> -->

                <el-form-item label="客服电话" label-width="107px"  class="itemTxt">
                <el-input v-model="formEdit.telephone" autocomplete="off"  class="longInput"></el-input>
                </el-form-item>

                <el-form-item label="营业时间" label-width="107px"  class="itemTxt">

                    <el-time-picker
                        v-model="value1"
                        :picker-options="{
                        selectableRange: '00:00:01 - 23:59:59'
                        }"
                        placeholder="任意时间点">
                    </el-time-picker>
                    <el-time-picker
                        arrow-control
                        v-model="value2"
                        :picker-options="{
                        selectableRange: '00:00:01 - 23:59:59'
                        }"
                        placeholder="任意时间点">
                    </el-time-picker>

                </el-form-item>
                
                    <!-- 省 -->
                <el-form-item label="省" label-width="107px" class="itemTxt">
                <el-select v-model="formEdit.province" placeholder="请选择..." :value="formEdit.province"  @change="cityListFn">
                    <!-- <el-option label="请选择..." value=""></el-option> -->
                    <el-option v-for="(p_item,pi) in provinceList" :key="pi"  :label="p_item.province" :value="p_item.province_id"></el-option>
                </el-select>
                </el-form-item>
                <!-- 市 -->
                <el-form-item label="市" label-width="107px" class="itemTxt">
                <el-select v-model="formEdit.city" placeholder="请选择..."  :value="formEdit.city" @change="areaListFn">
                    <!-- <el-option label="请选择..." value=""></el-option> -->
                    <el-option v-for="(c_item,ci) in cityList" :key="ci" :label="c_item.city" :value="c_item.city_id"></el-option>
                </el-select>
                </el-form-item>
                <!-- 区 -->
                <el-form-item label="县/区" label-width="107px" class="itemTxt">
                <el-select v-model="formEdit.area" placeholder="请选择..."  :value="formEdit.area">
                    <!-- <el-option label="请选择..." value=""></el-option> -->
                    <el-option v-for="(a_item,ai) in areaList" :key="ai" :label="a_item.area" :value="a_item.area_id"></el-option>
                </el-select>
                </el-form-item>
                <!-- 地址 -->
                <el-form-item label="地址" label-width="107px"  class="itemTxt">
                <el-input v-model="formEdit.address" autocomplete="off"  class="longInput"></el-input>
                </el-form-item>
                <!-- 经纬度 -->
                <el-form-item label="经纬度" label-width="107px"  class="itemTxt">
                <el-input v-model="formEdit.longitude" autocomplete="off"  class="longInput"></el-input>
                <p style="font-size:12px">不知道经纬度？<a href="https://lbs.amap.com/console/show/picker" target="_blank" style="color:rgb(94, 62, 235);">点击查询。</a>将查询结果直接粘贴到输入框中，请勿改动</p>
                </el-form-item>
                <!-- 提成比例 -->
                <el-form-item label="提成比例" label-width="107px"  class="itemTxt theshort">
                <el-input v-model="formEdit.first_step_percent" autocomplete="off"  class="longInput"></el-input>
                <el-input v-model="formEdit.second_step_percent" autocomplete="off"  class="longInput"></el-input>
                </el-form-item>



            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="edit = false">取 消</el-button>
                <el-button type="primary" @click="comfirmEdit" >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>

.storeInfo{
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .head{
        height: 60px;
        // padding:0 10px;
        // background: #fff;
        // border-top:1px solid #DCDFE6;
        margin-bottom: 10px;
        // .el-form{
            // margin-top: 10px;
        // }
    }       
    .tabContainer{
        flex-grow: 1;
        
        .el-table{
            font-size:12px;
            .has-gutter{
                background: rgb(244, 246, 250)
            }
            td{
                .cell{
                    text-align: center !important;
                }
                .lightFont{
                    border:none;
                    background: transparent;
                    color:rgb(94, 62, 235)
                }
            }
            
        }
    }
    .el-dialog{
        .el-dialog__body{
            
            .theshort{
                .el-input{
                    width: 208px
                }
            }
        }
    } 
    
}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
// import {draggable} from 'vuedraggable';
import upload from '../../pop/upload.vue';
var store_info_id = abc.getSession('store_id')
export default {
    components:{
        uploadBox:upload
    },
    data(){
        return {
            tableData:[],
            total:50,
            "a":"store_id",
            size:20,
            tabBar:[
                {'bar':'store_id','name':"ID"},
                {'bar':'cover_image','name':"封面"},
                {'bar':'title','name':"门店名称"},
                {'bar':'store_type_cn','name':"门店属性"},
                {'bar':'telephone','name':"客服电话"},
                {'bar':'city_name','name':"城市"},
                {'bar':'address','name':"地址"},
                {'bar':'percent_cn','name':"提成信息"},
                {'bar':'remain_refresh_count','name':"美团授权"},
                {'bar':'business_cn','name':"营业状况"},
                {'bar':'reserve_cn','name':"app预订"},
                {'bar':'store_id','name':"ID"},
            ],
            form: {
            region: '',
            type:'store_info',
            store_info_id:store_info_id
            },
            formEdit:{
                store_id:'',
                cover_image:'',
                cover_image_url:'ddddd',
                title:"",
                telephone:'',
                start_time:'',
                end_time:'',
                province:'111111111',
                city:'',
                area:'',
                address:'',
                longitude:'',
                first_step_percent:'',
                second_step_percent:'',
            },
            authorizationMeituan: false,
            dialogFormVisible: false,
            edit:false,//编辑的显示与否
            store_id:'',
            meituanAuth:{src:'https://e.dianping.com/slogout'},
            value1: new Date(2016, 9, 10, 18, 40),
            value2: new Date(2016, 9, 10, 18, 40),
            provinceList:[],//省份
            cityList:[],//根据省获取城市
            areaList:[],//根据城市获取区
            cityNow:[],//现有门店所在城市
            pageNum:1//page
        }
    },
    mounted(){
        var that = this;
        abc.getList(that,potUrl.storeList,that.form);
        that.cityListFn(2)
    },
    methods:{
        search(){
            var search = this.form,that = this;
            abc.getList(that,potUrl.storeList,that.form);
        },
        businessT(type,id){
            // 营业状况点击调起弹框
            console.log(type)
            var that = this;
            $('.business').Tdrag({
                handle:$('.el-dialog__header')
            })
            that.dialogFormVisible = true;
            that.store_id = id;
            that.form.region = type;
        },
        businessOk(){
            // 营业状况  弹框  确定
           var that = this;
           console.log('bbbb',that.form.region)
           var params = {
               store_id:that.store_id,
               business_type:that.form.region
           }
           abc.post(that,potUrl.storeUpdate,params,function(res){
            that.$message({"message":'设置成功！',"duration":2000});
            setTimeout(() => {
                abc.getList(that,potUrl.storeList,that.form);
            }, 2000);
            
            })
            that.dialogFormVisible = false; 
        },
        authorization(a,p){
            var that = this;
            a == ''?a='--':a=a;
            p == ''?p='--':p=p;
            that.meituanAuth.account = a
            that.meituanAuth.password = p;
            setTimeout(() => {
               that.meituanAuth.src = 'https://e.dianping.com/dz-open/merchant/auth?app_key=9c7a41c31334855d&state=meiktv' 
            }, 1000);
            that.authorizationMeituan = true;
            // $(".meituan").Tdrag({
            //     handle: ".el-dialog__header"
            // });
        },
        editFn(id){
            console.log('idddddd',id)
            var that = this;
            
            that.provinceListFn();

            abc.get(that,potUrl.storeInfo,{store_info_id:id},function(res){
                console.log('province',res);
                var info = res.data;
                that.formEdit = {
                    store_id:info.store_id,
                    cover_image:info.cover_image,
                    cover_image_url:info.cover_image_url,
                    title:info.title,
                    telephone:info.telephone,
                    start_time:info.start_time,
                    end_time:info.end_time,
                    province:info.province,
                    city:info.city,
                    area:info.area,
                    address:info.address,
                    longitude:info.longitude,
                    first_step_percent:info.first_step_percent,
                    second_step_percent:info.second_step_percent,
                }
                getCurren_cn(that.provinceList,that.formEdit.province,'province',that)
                that.cityListFn();
                getCurren_cn(that.cityList,that.formEdit.city,'city',that)
                that.areaListFn();
                getCurren_cn(that.areaList,that.formEdit.area,'area',that)
                that.edit = true;
            })
            $('.editT').Tdrag({
                handle:$('.el-dialog__header')
            })
            
        },
        provinceListFn(){
            //省；
            let that = this;
            abc.get(that,potUrl.provinceList,{},function(res){
                that.provinceList = res.data
            })
        },
        cityListFn(type=1){
            //市；
            let that = this;
            var provinceId = that.formEdit.province,url = potUrl.cityList
            if(type != 1){
                provinceId='';
                url = potUrl.sotreCity
            }
            abc.get(that,url,{province_id:provinceId},function(res){
                if(type != 1){
                   that.cityNow = res.data
                }else{
                   that.cityList = res.data 
                }
                 
                
            })
        },
        areaListFn(){
           //区；
            let that = this;
            abc.get(that,potUrl.areaList,{city_id: that.formEdit.city},function(res){
                that.areaList = res.data
            }) 
        },
        imgUrl(data){
            this.formEdit.cover_image = data;
        },
        comfirmEdit(){
            let that = this;
            abc.post(this,potUrl.storeEdit,this.formEdit,function(res){
                console.log(res)
                that.$message({"message":'操作成功',"duration":2000});
                abc.getList(that,potUrl.storeList,that.form);
                that.edit = false;

            })
        },
        changePage(val){
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,potUrl.storeList,that.form);
        }


    }
}

function getCurren_cn(list,id,type,that){
    $.each(list,function(i,item) {
        if(type == 'province' && item.province_id == id){
            that.formEdit.province_cn = item.province
        }
        if(type == 'city' && item.city_id == id){
            that.formEdit.city_cn = item.city
        }
        if(type == 'area' && item.area_id == id){
            that.formEdit.area_cn = item.area
        }
    })
}
</script>